<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo</title>
		<script src="./libgif.js"></script>
	</head>
	<body>
		<div>
			<img id="gifImg">
			<p>每一帧效果</p>
		</div>
		<script>
			var file = './example_gifs/qie.gif';
			load_gif(file);

			function load_gif(gif_source) {
				var gifImg = document.getElementById('gifImg');
				// gif库需要img标签配置下面两个属性
				var src = ''
				try {
				  src = gif_source;
				} catch (error) {
				  src = window.URL.createObjectURL(gif_source);
				}
				gifImg.setAttribute('rel:animated_src', src)
				gifImg.setAttribute('rel:auto_play', '0')
				
				// 新建gif实例
				var rub = new SuperGif({
					gif: gifImg
				});
				rub.load(function() {
					// console.log(rub.get_length());  // 获取帧数
					for (var i = 1; i <= rub.get_length(); i++) {
						// 遍历gif实例的每一帧
						rub.move_to(i);
						var imgImage = new Image();
						//canvas生成base64图片数据
						imgImage.src = rub.get_canvas().toDataURL('image/jpeg', 0.8);
						document.body.appendChild(imgImage)
					}
				})
			}
		</script>
	</body>
</html>
